Outline.html ver1.0
https://gyazo.com/9d4aa7323f118d4a7b90da384633cb8d
(自分用に作っているものでありサービスとして公開する予定はありません)
メジャーアップデート
データを保存・呼び出しできるようにして実際に使えるようになった
Outline.html ver0.xの時点では、アウトライナーらしい動きを実現するために何をどう書けば良いのかは一通り確認できたものの、実際データを扱った時にどことどう連携させるのかとかはまだ詰めていなかった 実際に動くようにするのはとても大変でした
フォーカスしている範囲を破線で表示
(ほとんど内部処理との戦い)
(あるいはCSSとの戦い)
GIF
開閉
https://gyazo.com/5eba5f5916ccbfc1910121f45057ff47
ドラッグアンドドロップ
https://gyazo.com/1073f4d6f18973be2997a69a00c88a10
メイン↔フォーカス間のドラッグアンドドロップ
https://gyazo.com/52202c2009c1b3802753c64ae1d26381
所感
エラーとの熾烈な戦い
昨日一日中やっていた
データ書き込みするようにしてからまずいバグを発見し、ちょっとデータを直すのが大変過ぎて一回消去する羽目に
まだメモらしいメモは書いていないし消去しても別に支障はない段階ではあったけど
ドラッグアンドドロップの挙動と、データの「position」欄を元にHTMLを出力する挙動におそろしく苦労した
ドラッグアンドドロップはメインとフォーカスを跨いで使えるようにするにはどうしたらいいかというのがなかなか大変だった
(多分大丈夫だと思うけど本当に大丈夫かまだ不安)
「position」欄の方は一応バグは取り除いたけどコードが複雑で新たなバグの元になるので結局使わないことにした
シンプルにメイン部分のHTMLを丸々localStorageに保存して呼び出すことに
ノードがひとつ以上存在しないと使えないので初回の呼び出しには使える
TypeScriptで勉強をスタートしたけど結局直にJavaScriptでやっている
多分TypeScriptで書いていれば予防できたバグがたくさん…
処理の複雑さがCards.htmlとは比較にならないのでバグの予測が立てられない素人には厳しい、VSCodeにTypeScriptの環境を作ったほうが良さそう 現時点で650行弱
まだ多少アイデアがあるのでちまちま追加していきたい